<template>
  <div :class="['flex-a', boxStyle]">
    <span v-if="preSuffix" class="pre-suffix">
      {{ preSuffix }}
    </span>
    <slot v-else name="pre-suffix"></slot>
    <slot></slot>
    <span v-if="suffix" class="suffix">
      {{ suffix }}
    </span>
    <slot v-else name="suffix"></slot>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

/* eslint-disable no-undef */
const props = withDefaults(
  defineProps<{
    preSuffix?: string
    suffix?: string
  }>(),
  {
    preSuffix: '',
    suffix: ''
  }
)
const { preSuffix, suffix } = props
const boxStyle = computed(() => {
  if (!preSuffix && !suffix) {
    return 'box'
  }
  return [
    { con: preSuffix, class: 'pre-suffix-box' },
    { con: suffix, class: 'suffix-box' },
    { con: suffix && preSuffix, class: 'pre-suffix-box, suffix-box' }
  ].find((i: any) => i.con)?.class
})
</script>
<style lang="stylus" scoped>
.box
.pre-suffix-box
  :deep(.el-input__wrapper)
    border-radius 0 4px 4px 0;
  :deep(.el-input__inner)
    text-align left
  :deep(.el-input__wrapper.is-focus)
    box-shadow 0 0 0 1px var(--mc-gray4-color) inset
.suffix-box
  :deep(.el-input__wrapper)
    border-radius 4px 0 0 4px;
  :deep(.el-input__inner)
    text-align left
  :deep(.el-input__wrapper.is-focus)
    box-shadow 0 0 0 1px var(--mc-gray4-color) inset
.suffix
  display: inline-flex;
  width: 30px;
  height: 34px;
  border: 1px solid var(--mc-gray4-color);
  border-left: unset;
  border-radius: 0 4px 4px 0;
  justify-content: center;
  align-items: center;
  color: rgba(0,0,0,0.88);
  font-size: 14px;
.pre-suffix
  display inline-flex
  height 34px
  width 30px
  border 1px solid var(--mc-gray4-color)
  border-right unset
  border-radius 4px 0 0 4px
  justify-content center
  align-items center
  color rgba(0, 0, 0, 0.88)
  font-size 14px
</style>
